<style type="text/css">
    .action-cell {
        margin-bottom: 20px;
    }

    .search-block {
        display: flex;
        margin-bottom: 10px;
    }

    .input-search {
        margin-right: 10px;
    }
</style>
<template>
    <div>
        <div class="action-cell">
            <div class="list-action-btn">
                <Button type="error" size="large" @click="jumpPage('','CarRuleAdd')">添加用车审核规则</Button>
            </div>
        </div>
        <Table :context="self" :data="tableData" :columns="tableColumns" stripe border></Table>
    </div>
</template>
<script>
    import apiUtil from '../../assets/utils/api_util';

    export default {
        data() {
            return {
                self: this,
                tableData: [],
                //
                total: 0,
                current: 1,
                tableColumns: [
                    {
                        title: '规则名称',
                        key: 'Rolename',
                        align: 'center',
                    },
                    {
                        title: '生效里程限制',
                        key: 'Limitmiles',
                        align: 'center',
                    },
                    {
                        title: '生效小时数限制',
                        key: 'Limithours',
                        align: 'center',
                    },
                    {
                        title: '规则适用人员角色',
                        key: 'PeopleTypeTitle',
                        align: 'center',
                    },
                    // {
                    //     title: '是否需要上级审核',
                    //     key: 'Isneeduplevelcheck',
                    //     align: 'center',
                    //     render: (h, params) => {
                    //         if (params.row.Isneeduplevelcheck == true) {
                    //             return h('div', [
                    //                 h('span', {}, '需要')
                    //             ])
                    //         } else {
                    //             return h('div', [
                    //                 h('span', {}, '不需要')
                    //             ])
                    //
                    //         }
                    //     }
                    // },
                    {
                        title: '规则状态',
                        key: 'State',
                        align: 'center',
                        render: (h, params) => {
                            if (params.row.State == true) {
                                return h('div', [
                                    h('span', {}, '有效')
                                ])
                            } else {
                                return h('div', [
                                    h('span', {}, '无效')
                                ])
                            }
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                    h('Button', {
                                        props: {
                                            type: 'error',
                                            size: 'small'
                                        },
                                        style: {
                                            'margin-right': '10px',
                                        },
                                        on: {
                                            click: () => {
                                                this.remove(params.row)
                                            }
                                        }
                                    }, '删除'),
                                    h('Button', {
                                        props: {
                                            type: 'warning',
                                            size: 'small'
                                        },
                                        style: {
                                            'margin-right': '10px',
                                        },
                                        on: {
                                            click: () => {
                                                this.jumpPage(params.row.Id, 'CarRuleEdit')
                                            }
                                        }
                                    }, '编辑'),
                                ]
                            )
                        }
                    }
                ]
            }
        },
        mounted() {
            this.mockTableData();
        },
        methods: {
            //跳转
            jumpPage: function (id, url) {
                //跳转
                let route = '';
                if (id > 0) {
                    route = {
                        path: url,
                        query: {
                            id: id
                        },
                    };
                } else {
                    route = {
                        path: url,
                    };
                }

                this.$router.push(route);
            },
            mockTableData() {
                let that = this;

                let para = {};
                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.CarReqCheckRoles, para, function (res) {
                    that.$Loading.finish();
                    that.tableData = res.Msg;
                });

            },
            remove(row) {
                let that = this;
                this.$Modal.confirm({
                    title: '删除',
                    content: `是否该审核规则`,
                    onOk: function () {
                        this.$Loading.start();
                        let para = {
                            roleId: row.Id
                        };
                        let params = that.$qs.stringify(para);
                        apiUtil.post(that, apiUtil.urls.DelCarReqCheckRole, params, function (res) {
                            that.mockTableData();
                        });
                    }
                })
            },
            changePage(row) {
                // 这里直接更改了模拟的数据，真实使用场景应该从服务端获取数据
                console.log("row", row);
                this.current = row;
                this.mockTableData();
            },
            //修改状态
            setruleState(id, state) {
                let that = this;

                let para = {
                    id: id,
                    state: state,
                };
                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.post(that, apiUtil.urls.EditRestCheckRoleState, params, function (res) {
                    that.$Loading.finish();
                    that.mockTableData();

                });

            },

        },
    }
</script>